<template>
  <children>
    <!-- <template v-slot="">
        <div>
            匿名插槽
        </div>
    </template> -->

    <!-- 具名插槽 v-slot:header  简写->  #header -->
    <!-- <template #header>
      <div>header</div>
    </template>
    <template #default>
      <div>default</div>
    </template>
    <template #footer>
      <div>footer</div>
    </template> -->

    <!-- 作用域插槽(动态参数)   子组件通过 :list="值"传递参数  父组件通过 v-slot:header="{值}"接收参数  -->
    <!-- <template #header="list">
      <div>header</div>
    </template> -->
    <template #header>
      <div>header</div>
    </template>
    <template #default="{ list }">
      <div>{{ list }}</div>
    </template>
    <template #footer>
      <div>footer</div>
    </template>

    <!-- 动态插槽  插槽可以是变量 -> 没啥卵用-->
    <!-- <template #[name]>
    <div>23</div>
  </template> -->
  </children>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>

<style scoped></style>
